<ui:composition xmlns="http://www.w3.org/1999/xhtml"
				xmlns:h="http://java.sun.com/jsf/html"
		      	xmlns:f="http://java.sun.com/jsf/core"
		      	xmlns:ui="http://java.sun.com/jsf/facelets"
		      	xmlns:p="http://primefaces.org/ui"> 
			
				<p:panel styleClass=" width">
				<f:facet name="header"> Gráfica comparativa mensual</f:facet>
				
					
					<p:dataTable id="dataTable8" var="car" value="#{tableBean.carsSmall}" widgetVar="carsTable" emptyMessage="No cars found with given criteria">            	
						<f:facet name="header">
						<p:panelGrid columns="4" styleClass="noborder">
						    <h:outputText value="Buscar:" styleClass="rigth"/>
						    <p:inputText id="globalFilter" onkeyup="carsTable.filter()" style="margin-left:10px;" styleClass="width_input left" />
						    <p:calendar  showOn="button" styleClass="rigth"></p:calendar>
						    <p:calendar  showOn="button" styleClass="left"></p:calendar>
						</p:panelGrid>
						</f:facet>
						<p:column id="codigo" filterBy="#{car.model}" headerText="Código" footerText="" filterMatchMode="contains">
						    <h:outputText value="#{car.model}" />
						</p:column>
						<p:column id="nombres" filterBy="#{car.year}" headerText="Nombres" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
						<p:column id="tipoConsulta" filterBy="#{car.manufacturer}" headerText="Tipo Consulta" footerText="" filterOptions="#{tableBean.manufacturerOptions}" filterMatchMode="exact">
						    <h:outputText value="#{car.manufacturer}" />
						</p:column>
						<p:column id="mostra" headerText="Mostrar" footerText="">
						    <h:outputText value="#{car.year}" />
						</p:column>
					</p:dataTable>
					
					<br/>
					
					<p:dataTable id="tab2" var="car" value="#{tableBean.carsSmall}" styleClass="center">
						<p:column headerText="Código"  >
					        <h:outputText value="#{car.model}"/>
					    </p:column>
					    <p:column id="nombre" headerText="Nombre"  >
					        <h:outputText value="#{car.year}"/>
					    </p:column>
					    <p:column id="servicio" headerText="Tipo Servicio"  >
					    </p:column>
					    <p:column id="detalle" headerText="Ver detalle"  >
					    </p:column>
			     	</p:dataTable>
			     	
			     	
			     	<p:commandButton value="Graficar"></p:commandButton>
					<br/>
			     	<br/>
					<ui:include src="/reportes/chartBar.xhtml" />
					<br/>
					<p:commandButton value="Imprimir Gráfica"></p:commandButton>
					
				</p:panel>
</ui:composition>